<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../less/wode.css" />
	<body>
		<div class="wode">
			<div class="headBox">
				<img src="../img/personal%20center_photo_top.png" class="head_bg">
				<div class="navBox">
					<div class="head">
						<img src="" class="head_img">
						<div class="right">
							<div class="top">
								<span class="name"></span>
								<div class="levelBox">
									<img src="" class="level_img">
								</div>
							</div>
							<div class="bottom">
								<span class="tip"></span>
							</div>
						</div>
					</div>
					<ul class="myUl">
					</ul>
				</div>
			</div>
			<div class="pictureBox">
				<div class="head">
					<div class="left">
						<span class="line"></span>
						<span class="title_text">我的相册影集</span>
					</div>
				</div>
				<ul class="pictureUl">
				</ul>
			</div>
			<div class="myDtBox">
				<div class="head">
					<div class="left">
						<span class="line"></span>
						<span class="title_text">我的相册影集</span>
					</div>
				</div>
				<ul class="myDtUl">
				</ul>
			</div>
	</body>
	<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var myXinxi = {
			head_img: '../img/personal%20center_photo_head%20portrait.png',
			name: '小陈的旅拍故事',
			level: 0,
			tip: '摄影是爱好也是终生追逐的梦想13213',
			myList: [{
					count: '6842',
					text: '我的粉丝'
				},
				{
					count: '342',
					text: '我的关注'
				},
				{
					count: '1842',
					text: '我的收藏'
				},
				{
					count: '8542',
					text: '我的访客'
				},
			],
			myPictureList: [{
					img: '../img/my%20lbum_img.png',
					count: '120',
					title: '民宿屋集合'
				},
				{
					img: '../img/my%20lbum_img.png',
					count: '123',
					title: '一望无际的海洋'
				},
				{
					img: '../img/my%20lbum_img.png',
					count: '26',
					title: '旅行的故事'
				}
			],
			myDtList: [{
					month: '12',
					day: '04',
					title: '摄影构图学习打卡第七天',
					text: '通过分析摄影常用构图来体会摄影构图元素的比例，近似色配色让人感觉画面和谐，再添加点缀的互补色就能让画面更加丰...',
					imgList: [{
							img: '../img/my%20dynamic_img1.png'
						},
						{
							img: '../img/my%20dynamic_img2.png'
						},
						{
							img: '../img/my%20dynamic_img3.png'
						},
					]
				},
				{
					month: '11',
					day: '11',
					title: '摄影构图学习打卡第七天',
					text: '通过分析摄影常用构图来体会摄影构图元素的比例，近似色配色让人感觉画面和谐，再添加点缀的互补色就能让画面更加丰...',
					imgList: [{
							img: '../img/my%20dynamic_img1.png'
						},
						{
							img: '../img/my%20dynamic_img2.png'
						},
						{
							img: '../img/my%20dynamic_img3.png'
						},
					]
				},
				{
					month: '10',
					day: '04',
					title: '摄影构图学习打卡第七天',
					text: '通过分析摄影常用构图来体会摄影构图元素的比例，近似色配色让人感觉画面和谐，再添加点缀的互补色就能让画面更加丰...',
					imgList: [{
							img: '../img/my%20dynamic_img1.png'
						},
						{
							img: '../img/my%20dynamic_img2.png'
						},
						{
							img: '../img/my%20dynamic_img2.png'
						},
					]
				}
			]
		}
		$('.head_img').attr('src', myXinxi.head_img)
		$('.name').html(myXinxi.name)
		if (myXinxi.level == 0) {
			$('.level_img').attr('src', '../img/photo_medal%201.png')
		} else if (myXinxi.level == 1) {
			$('.level_img').attr('src', '../img/photo_medal%202.png')
		} else if (myXinxi.level == 2) {
			$('.level_img').attr('src', '../img/photo_medal%203.png')
		} else if (myXinxi.level == 3) {
			$('.level_img').attr('src', '../img/photo_medal%204.png')
		}
		$('.tip').html(myXinxi.tip)
		var list = myXinxi.myList
		for (var i = 0; i < list.length; i++) {
			$('.myUl').append('<li class="myLi"><p class="count">' + list[i].count + '</p><p class="text">' + list[i].text +
				'</p></li>')
		}
		var myPictureList = myXinxi.myPictureList
		for (var i = 0; i < myPictureList.length; i++) {
			$('.pictureUl').append('<li class="pictureLi"><img src="' + myPictureList[i].img +
				'" class="picture_bg"><div class="countBox"><img src="../img/home_icon_number%20of%20images.png" class="icon_img"><span class="count">' +
				myPictureList[i].count + '</span></div><p class="title">' + myPictureList[i].title + '</p></li>')
		}
		var myDtList = myXinxi.myDtList
		for (var i = 0; i < myDtList.length; i++) {
			$('.myDtUl').append(
				'<li class="myDtLi"><div class="left"><div class="timeBox"><span class="month">'+myDtList[i].month+'</span><span class="day">/'+myDtList[i].day+'</span></div><p class="dashed"></p></div><div class="container"><p class="title">'+myDtList[i].title+'</p><p class="text">'+myDtList[i].text+'</p><ul class="dt_picture_Ul"></ul></div></li>'
			)
		}
		
		$('.dt_picture_Ul').each(function(index){
			for(var i=0;i<myDtList.length;i++){
				if(i==index){
					imgList = myDtList[i].imgList
				}
					
			}
			
			for(var i=0;i<imgList.length;i++){
				$('.dt_picture_Ul').eq(index).append('<li><img src="'+imgList[i].img+'"></li>')
			}
		})
		$('.level_img').click(function(){
			window.location.href="../level.html"
		})
		
	</script>
</html>
